<!-- MessageItem.vue 单条消息组件 -->
<template>
	<div class="message-wrapper" :class="{ 'self-message': message.isSelf }">
		<div class="message-content">
			<UserAvatar
				v-if="!message.isSelf"
				:src="targetUser.avatar"
				class="avatar"
			/>

			<div class="message-body">
				<Bubble :message="message" />
				<div class="time">{{ formatTime(message.timestamp) }}</div>
			</div>

			<UserAvatar
				v-if="message.isSelf"
				:src="currentUser.avatar"
				class="avatar"
			/>
		</div>
	</div>
</template>

<script setup>
import Bubble from './Bubble.vue'
import UserAvatar from './UserAvatar.vue'

defineProps({
	message: { type: Object, required: true },
	currentUser: { type: Object, required: true },
	targetUser: { type: Object, required: true }
})

// 新增时间格式化方法
const formatTime = timestamp => {
	return new Date(timestamp).toLocaleTimeString('zh-CN', {
		hour: '2-digit',
		minute: '2-digit'
	})
}
</script>

<style scoped>
.message-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.time {
	font-size: 12px;
	color: #666;
	text-align: right;
}

.self-message .time {
	text-align: left;
}
.message-wrapper {
	margin: 10px 0;
}

.self-message {
	display: flex;
	justify-content: flex-end;
}

.message-content {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 80%;
}
</style>
